<!--
  ~ Copyright (c) 2019. seven studio. @chengdu
  ~ seven studio in chengdu by lb
  ~ this project for snmp tool
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加设备</title>
    <link rel="stylesheet" href="/res/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/res/frame/static/css/style.css">
    <link rel="icon" href="/res/frame/static/image/code.png">
</head>
<body class="body">
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">设备名称:</label>
        <div class="layui-input-inline">
            <input type="text" id='devName' placeholder="设备名称" lay-verify="required"
                   class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">IP地址:</label>

        <div class="layui-input-inline">
            <input type="text" id='devIp' lay-verify="required" placeholder="IP地址"
                   class="layui-input" autocomplete="off">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">设备类型:</label>
        <div class="layui-input-inline">
            <select id='devType' name="devType" lay-verify="required" lay-filter="devType">
                <option value="">请选设备类型</option>
                <option value="SwitchType">交换机</option>
                <option value="CameraType">摄像头</option>
                <option value="RouterType" disabled>路由器</option>
                <option value="RouterSwitchType" disabled>路由交换机</option>
                <option value="ComputerType" disabled>PC主机</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">SNMP端口:</label>
        <div class="layui-input-inline">
            <input type="text" id='devSnmpPort' lay-verify="number" placeholder="端口"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">团体名:</label>
        <div class="layui-input-inline">
            <input type="text" id='devReadcommunity' placeholder="团体"
                   class="layui-input">
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">版本号:</label>
        <div class="layui-input-inline">
            <select id="devSnmpVersion" name="devSnmpVersion" lay-verify="">
                <option value="">请选择版本号</option>
                <option value=0>V1</option>
                <option value=1>V2C</option>
            </select>
        </div>
    </div>
</form>

<div class="layui-layer-btn layui-layer-btn-c">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" id="sub">提交</button>
</div>


<script src="/res/frame/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/res/js/index.js"></script>
<script type="text/javascript">

    layui.use(['form', 'layedit', 'laydate', 'element', 'cookie'], function () {
        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            , $ = layui.jquery,
            cookie = layui.cookie,
            laydate = layui.laydate;

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        form.on('select(devType)', function (data) {
            if (data.value == "CameraType") {
                console.log(data.value)
                $('#devSnmpPort').attr("disabled", "disabled")
                $('#devReadcommunity').attr("disabled", "disabled")
                $('#devSnmpVersion').attr("readonly", "readonly")
            } else {
                $('#devSnmpPort').removeAttr("disabled")
                $('#devReadcommunity').removeAttr("disabled")
                $('#devSnmpVersion').removeAttr("readonly")
            }

        });


        $('#sub').on('click', function () {
            var params;
            var url;

            if ($("#devType").val() != "CameraType") {
                params = {
                    "devName": $("#devName").val(),
                    "devType": $("#devType").val(),
                    "devIp": $("#devIp").val(),
                    "devSnmpPort": $("#devSnmpPort").val(),
                    "devReadcommunity": $("#devReadcommunity").val(),
                    "devSnmpVersion": $("#devSnmpVersion").val(),
                }
            } else {
                params = {
                    "devName": $("#devName").val(),
                    "devType": $("#devType").val(),
                    "devIp": $("#devIp").val(),
                }
            }

            url = "/dev/add";
            $.ajax({
                url: url,
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(params),
                success: function (result) {
                    console.log(result)
                    if (result.code == 200) {
                        layer.msg(result.msg);
                        initPort(result.data.pkGuid);
                        setTimeout(function () {
                            parent.location.reload();
                        }, 1000);

                    } else {
                        layer.msg(result.msg);

                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.responseText);

                }
            });


        });

        function initPort(pkGuid) {
            $.ajax({
                url: '/dev/init?pkGuid=' + pkGuid,
                type: "get",
                contentType: "application/json",
                success: function (result) {
                    console.log(result.message);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest.responseText);

                }
            });
        }

    });


</script>
</body>
</html>